<template>
	<view>
		<uni-popup ref="cuModalDialog">
			<view class="dialog">
				<view class="dialog-title">提示</view>
				<view class="dialog-content">
					<text>{{message}}</text>
				</view>
				<view class="dialog-footer">
					<button class="button-cancel" @click="cancel" v-if="showCancelBtn">取消</button>
					<button class="button-confirm" @click="confirm" v-if="showCancelBtn">确定</button>
					<button class="button" @click="confirm" v-if="!showCancelBtn">确定</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name: 'cuDialog',
		emits: ['confirm', 'cancel'],
		props: {
			name: {
				type: String,
				default: ''
			},
			show: {
				type: Boolean,
				default: false
			},
			message: {
				type: String,
				default: ''
			},
			showCancelBtn: {
				type: Boolean,
				default: true
			}
		},
		watch: {
			name: {
				handler(val) {
					if (val) {
						this.open();
					} else {
						this.close();
					}
				},
				deep: true
			},
			show: {
				handler(val) {
					if (val) {
						this.open();
					} else {
						this.close();
					}
				},
				deep: true
			}
		},
		methods: {
			open() {
				this.$refs.cuModalDialog.open();
			},
			close() {
				this.$refs.cuModalDialog.close();
			},
			confirm() {
				this.$emit('confirm', this.name);
			},
			cancel() {
				this.$emit('cancel')
			}
		}
	}
</script>
